<template>
	<view>
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<template #top>
				<tn-navbar>车辆充值查询</tn-navbar>
				<tn-input v-model="inputValue" placeholder="请输入车牌名称">
					<template #suffix>
						<view class="tn-ml tn-mr" @click="filterData">
							<tn-icon name="search" color=" tn-gray_bg"></tn-icon>
						</view>
					</template>
				</tn-input>
			</template>
			<!-- 账户总金额 -->
			<view class="sum tn-gradient-bg__cool-13 tn-white_text tn-m-sm tn-shadow-md tn-flex tn-flex-column tn-align-center">
				<view class="tn-text-lg tn-text-bold tn-text-center">账单统计</view>
				<view class="tn-text-2xl tn-text-bold">
					<text>12,812.08</text>
				</view>
				<view class="tn-flex tn-justify-between tn-w-full tn-mt">
					<view class="tn-flex-1 tn-flex tn-flex-column tn-align-center">
						<view class="tn-text-md">应收金额</view>
						<view class="tn-text-lg tn-text-bold">20,362</view>
					</view>

					<view class="tn-flex-1 tn-flex tn-flex-column tn-align-center">
						<view class="tn-text-md">实收金额</view>
						<view class="tn-text-lg tn-text-bold">206</view>
					</view>
				</view>
			</view>
			<!-- 账单记录 -->
			<view class="tn-shadow-md">
				<view class="tn-mt-sm tn-p-sm">
					<tn-title title="账单记录" mode="vLine" assist-color="tn-blue" size="lg" />
				</view>
				<block v-for="(item, index) in billList.data" :key="index">
					<view class="tn-border-bottom tn-gray-disabled_border tn-flex justify-between tn-align-center tn-p-sm">
						<view class="tn-flex tn-align-center">
							<view class="  ">
								<tn-icon :name="item.icon" color="tn-orange" size="60" />
							</view>
							<view>
								<view class="tn-text-md tn-text-bold">{{ item.title }}</view>
								<view class="tn-mt-xs tn-text-sm tn-gray_text">
									{{ item.time }}
								</view>
							</view>
						</view>
						<view class="tn-text-right">
							<view class="tn-text-md tn-text-bold">
								{{ item.state ? "+" : "-" }} {{ item.money }}
							</view>
							<view class="tn-mt-xs tn-text-sm tn-gray_text">
								手续费: {{ item.balance }}
							</view>
						</view>
					</view>
				</block>
			</view>
			<view class="tn-tabbar-height"></view>

		</z-paging>
	</view>
</template>

<script setup lang="ts">
	import box from "@/components/global-box/index.vue";
	import { ref, reactive } from "vue";
	import { onLoad } from "@dcloudio/uni-app";


	// ===============模拟数据 =========================

	// 模拟数据
	const tempList = ref([]);

	// z-paging 示例
	const paging = ref(null);
	// 数据列表
	const dataList = ref();

	const queryList = (pageNo, pageSize) => {
		// 模拟数据

		for (let i = 0; i < 10; i++) {
			tempList.value.push({
				title: "浙AAC115" + i,
				money: "129.68",
				state: 1,
				time: "2023-09-22 20:06",
				balance: "12,812.08",
				icon: "plant",
			})
		}
		paging.value.complete(tempList.value);
	};

	// ===========================================

	const fixedList = ["账单明细", "资产统计"];
	const billObj = {
		title: "浙AAC1151",
		money: "129.68",
		state: 1,
		time: "2023-09-22 20:06",
		balance: "12,812.08",
		icon: "plant",
	};
	const billList = reactive<any>({
		data: [],
	});
	onLoad(() => {
		init();
	});
	const current = ref(0);
	const tabChange = (index : number) => (current.value = index);
	// 初始化
	const init = () => {
		for (let index = 0; index < 12; index++) {
			billList.data.push(billObj);
		}
	};
</script>

<style lang="scss" scoped>
	/* 移除了自定义样式，使用tnV3的样式 */
	.sum {
		border-radius: 15rpx;
		padding: 50rpx 0 30rpx 20rpx;
		text-align: center;
	}

	.billList {
		margin: 50rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tn-tabbar-height {
		min-height: 80rpx;
		height: calc(80rpx + env(safe-area-inset-bottom) / 2);
		height: calc(80rpx + constant(safe-area-inset-bottom));
	}

</style>
